<template>
  <g class="map-layer">
    <g
      v-for="(v, i) in MAP[recordStore.stage.count]"
      :key="`y${i}`"
    >
      <g
        v-for="(t, d) in v"
        :key="`x${d}`"
      >
        <Brick v-if="t === 1" :transform="`translate(${d * GRID}, ${i * GRID})`" />
        <Steel v-else-if="t === 2" :transform="`translate(${d * GRID}, ${i * GRID})`" />
        <Forest v-else-if="t === 3" :transform="`translate(${d * GRID}, ${i * GRID})`" />
        <River v-else-if="t === 4" :transform="`translate(${d * GRID}, ${i * GRID})`" />
        <Snow v-else-if="t === 5" :transform="`translate(${d * GRID}, ${i * GRID})`" />
      </g>
    </g>
  </g>
</template>

<script setup>
  import { GRID } from '@/utils/global'
  import Brick from './Brick.vue'
  import Steel from './Steel.vue'
  import River from './River.vue'
  import Forest from './Forest.vue'
  import Snow from './Snow.vue'
  import { useRecordStore } from '@/store/gameRecord'
  import { MAP } from '@/utils/map'

  const recordStore = useRecordStore()
</script>

<style lang="scss" scoped>

</style>